<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>perspective</title>
    <!-- <link rel="stylesheet" href="css/base.css" /> -->
    <style type="text/css" media="screen">
    body{background:#a0b3d6; font-size:87.5%; margin:0; line-height:1.5; color:#333; font-family:Arial, sans-serif;}
    a{color:#34538b; text-decoration:none;}a:hover{text-decoration:underline;}
    a img { border: 0; }
    input,select,textarea{font-size:100%;}
    #header{height:60px; padding:0 0 0 40px;}
    #header .logo{margin-top:12px; overflow:hidden; float:left;}
    #main{width:100%; background:#beceeb; overflow:hidden;}
    #main h1{line-height:40px; margin:0; text-align:center; font-size:18px; background:#c1d5eb; font-family:'kaiti','microsoft yahei'; text-shadow:0px 1px 0px #f2f2f2;}
    #body{padding:0; overflow:hidden;}
    #body .part{width:50%; min-height:400px; _height:400px; background:white;}
    #code{float:left; margin-left:-1px; margin-bottom:-999em; padding-bottom:999em;}
    #effect{float:right; margin-right:-1px; margin-bottom:-999em; padding-bottom:999em;}
    #body h3{line-height:30px; margin:0; font-size:15px; background:#f0f3f9; padding-left:10px; border-bottom:1px solid #ededed; color:#4e4e4e; text-shadow:0px 1px 0px white; font-family: 'microsoft yahei';}
    #footer{line-height:1.4; font-size:12px; padding:15px 0; border-top:1px solid #486aaa; font-family:'Lucida Grande',Verdana, Sans-Serif; text-align:center; text-shadow:1px 1px #cad5eb;}
    #footer:before{display:block; height:1px; content:''; background-color:#909BAF; color:#aaa; overflow:hidden; position:relative; top:-15px;}
    #footer img{margin-bottom:-3px;}
    .show{padding-bottom:20px;}
    .show h5{font-size:13px; line-height:20px; padding:10px 0 2px 2px; margin:0 0 0 8px;}
    .demo{padding:10px; *zoom:1;}
    .demo:after{display:table; content:""; clear:both;}
    .demo .remind {
        color: gray;
        font-size: 12px;    
    }
    pre{
      font:14px/1.3 Consolas, Monaco, monospace;
      padding:5px 10px;
      margin:0;
      white-space:pre-wrap;
      word-wrap:break-word;
    }
    #ad,.bota {display:block!important; text-align:center; }
    .ad,.topa { height:60px; position: absolute; top: 0; right: 0; left: 250px; text-align:right; overflow:hidden; }
    @media screen and (max-width: 700px) {
       .ad,.topa { display: none; }
    }
    .light{background:#f0f3f9;}
    .description{font-size:12px; color:gray;}
    #content{min-height:500px; _height:500px; background:white; border:solid #cad5eb; border-width:0 2px; font-family:'Lucida Grande',Verdana;}
    .article{font-family:Arial; padding:10px 0; font-size:12px; clear:both;}
    .article_new{ margin:-31px 10px 0 0; line-height: 20px; font-family:Arial; padding:5px 0; font-size:12px; clear:both; text-align:right;}
    .article_new a { display: inline-block; }
    #back{line-height:40px;margin-top:-40px; position:absolute; right:20px; padding: 0 10px 0 13px; background-color: #fff; animation:tada 1s 1s; color: #cd0000; font-size:12px;}
    @keyframes tada {
      from {
        transform: scale3d(1, 1, 1);
      }
      10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      }
      30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      }
      40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      }
      to {
        transform: scale3d(1, 1, 1);
      }
    }
    .stage_area {
        width: 900px;
        min-height: 100px;
        margin-left: auto;
        margin-right: auto;
        padding: 100px 50px;
        background-color: #f0f0f0;
        box-shadow: inset 0 0 3px rgba(0,0,0,.35);  
        
         -webkit-perspective: 800px;
           -moz-perspective: 800px;
                perspective: 800px;
        
        -webkit-transition: top .5s;
        
        position: relative;
        top: 0;
    }

    .container {
        width: 128px;
        height: 100px;
        margin-left: -64px;
        
        -webkit-transition: -webkit-transform 1s;
           -moz-transition: -moz-transform 1s;
                transition: transform 1s;
        
        -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
               transform-style: preserve-3d;    
               
        position: absolute;
        left: 50%;
    }

    .piece {
        width: 128px;
        
        box-shadow: 0 1px 3px rgba(0,0,0,.5);
        
        -webkit-transition: opacity 1s, -webkit-transform 1s;
           -moz-transition: opacity 1s, -moz-transform 1s;
                transition: opacity 1s, transform 1s;
                
        position: absolute;
        bottom: 0;
    }

    .remind {
        position: absolute;
        left: 1em;
        top: 1em;
    }

    .chrome_fix {
        position: absolute;
        left: 1em;
        top: 3em;
    }
    </style>
</head>

<body>
    <div class="demo">
        <div id="stage" class="stage_area" style="top: 0px;">
            <strong class="remind">点击任意图片浏览：</strong>
            <div id="container" class="container" style="transform: rotateY(-280deg);"><img id="piece1" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="piece" style="transform: rotateY(0deg) translateZ(195.839px);"><img id="piece8" src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class="piece" style="transform: rotateY(40deg) translateZ(195.839px);"><img id="piece3" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class="piece" style="transform: rotateY(80deg) translateZ(195.839px);"><img id="piece4" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class="piece" style="transform: rotateY(120deg) translateZ(195.839px);"><img id="piece6" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class="piece" style="transform: rotateY(160deg) translateZ(195.839px);"><img id="piece7" src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class="piece" style="transform: rotateY(200deg) translateZ(195.839px);"><img id="piece10" src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" class="piece" style="transform: rotateY(240deg) translateZ(195.839px);"><img id="piece13" src="http://image.zhangxinxu.com/image/study/s/s128/mm13.jpg" class="piece" style="transform: rotateY(280deg) translateZ(195.839px);"><img id="piece15" src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" class="piece" style="transform: rotateY(320deg) translateZ(195.839px);"></div>
            <input type="button" value="舞台位置窗体区域垂直居中" class="chrome_fix">
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    (function() {
        if (typeof window.screenX === "number") {
            // 随机颜色HSL
            var randomHsl = function() {
                return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
            }
            // CSS transform变换应用
            , transform = function(element, value, key) {
                key = key || "Transform";
                ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
                    element.style[prefix + key] = value;    
                }); 
                
                return element;
            }
            // 浏览器选择器API
            , $ = function(selector) {
                return document.querySelector(selector);
            }, $$ = function(selector) {
                return document.querySelectorAll(selector);
            };
            
            // 显示图片
            var htmlPic = '', arrayPic = [1, 8, 3, 4, 6, 7, 10, 13, 15], rotate = 360 / arrayPic.length;
            
            arrayPic.forEach(function(i) {
                htmlPic = htmlPic + '<img id="piece'+ i +'" src="http://image.zhangxinxu.com/image/study/s/s128/mm'+ i +'.jpg" class="piece" />';   
            });
                
            // 元素
            var eleStage = $("#stage"), eleContainer = $("#container"), indexPiece = 0;
            // 元素
            var elePics = $$(".piece"), transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);
            
            eleContainer.innerHTML = htmlPic;
            eleContainer.addEventListener("click", function() {
                transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)");  
            });
            
            arrayPic.forEach(function(i, j) {
                transform($("#piece" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ + 20) +"px)");   
            }); 
            
            
            
            
            
            // 垂直位置居中 - Chrome浏览器
            var funStageValign = function(element) {
                var scrollTop = document.documentElement.scrollTop, clientHeight = document.documentElement.clientHeight;
                    offsetTop = element.getBoundingClientRect().top;
                
                if (parseInt(window.getComputedStyle(element).top) === 0) {
                    element.style.top = scrollTop + (window.innerHeight - 300) / 2 - offsetTop;
                } else {
                    element.style.top = "0px";
                }
            };
            
            if (/chrome/i.test(navigator.userAgent)) {
                // 创建Chrome浏览器视区修正按钮
                var eleButton = document.createElement("input");
                var arrValue = ["舞台位置窗体区域垂直居中", "垂直位置还原"];

                eleButton.type = "button";
                eleButton.value = arrValue[0];  
                eleButton.className = "chrome_fix";
                eleButton.addEventListener("click", function() {
                    this.value = arrValue[Number(this.value !== arrValue[1])];
                    var stage = this.parentNode;
                    funStageValign(stage);
                });
                
                eleStage.appendChild(eleButton);
            }           
        } else {
            alert("你好，养猪场不是飞机场，是开不了战斗机的！"); 
        }
    })();
    </script>
</body>

</html>
